<template>
  <div class="login-container">
    <form @submit.prevent="login">
      <div class="form-group">
        <label for="username">账号</label>
        <input
          type="text"
          id="username"
          v-model.trim="userInfo.username"
          placeholder="请输入账号"
          required
        />
      </div>

      <div class="form-group">
        <label for="password">密码</label>
        <input
          type="password"
          id="password"
          v-model.trim="userInfo.password"
          placeholder="请输入密码"
          required
        />
      </div>

      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import { setSelect } from ".";

// 只导入需要的对象
import { verify } from "../api/user";

// 定义表单数据
const userInfo = reactive({
  username: "",
  password: "",
});

// 提交表单的逻辑
const login = () => {
  if (userInfo.username.length < 4 || userInfo.username.length > 15) {
    alert("用户名长度应在4-15位长度之间!");
    // 获取dom对象，并聚焦
    document.getElementById("username").focus();
    return false;
  }

  if (userInfo.password.length < 4 || userInfo.password.length > 15) {
    alert("密码长度应在4-15位长度之间!");
    // 获取dom对象，并聚焦
    document.getElementById("password").focus();
    return false;
  }

  // 调用 用户服务的接口，将数据存入
  verify(userInfo.username, userInfo.password, (success) => {
    if (success) {
      // 通常登录后，会把登录状态、必要的业务数据写入cookie、全局变量、本地存储（会话和永久存储）
      // 前端项目，通常会使用Vue Router库来管理前端路由，登录成功后，跳转到指定的页面
      alert("登录成功");
      // 设置选项卡值，模拟跳转到用户列表页面
      setSelect("userListPage");
    } else {
      alert("无效的用户名或密码!");
      // 聚焦表单某个字段，增强用户体验
      document.getElementById("username").focus();
    }
  });
};
</script>

<style scoped>
.login-container {
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
}

input {
  width: 90%;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

input:focus {
  border-color: #007bff;
  outline: none;
}

button {
  width: 100%;
  margin-top: 20px;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}
</style>
